<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
</head>
<style>
    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin:0;
    }

    header {
        display: flex;
        align-items: center;
        height: 80px;
        padding-left: 360px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .round {
        width: 36px;
        height: 36px;
        background: #0065F0;
        border-radius: 50%;
    }

    .logo-word {
        font-size: 18px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 11px;
    }

    #main {
        height: calc(100% - 80px);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px auto 50px;
    }

    .form-header {
        margin-bottom: 50px;
    }

    .login-type {
        display: inline-block;
        color: #CCCCCC;
        font-size: 24px;
    }

    .login-active {
        color: #0065F0;
        position: relative;
        font-weight: 500
    }

    .login-active:after {
        content: '';
        display: block;
        position: absolute;
        bottom: -14px;
        left: 0;
        width: 60px;
        height: 4px;
        background: rgba(0, 101, 240, 1);
        border-radius: 2px;
    }

    .input {
        width: 480px;
        height: 70px;
        margin-bottom: 30px;
        border-radius: 5px;
        background: #FAFAFC;
        display: flex;
        align-items: center;
        padding-left: 20px;
        box-sizing: border-box;
        position: relative;
    }

    .input-logo {
        width: 32px;
        height: 32px;
    }

    .input-logo.logo1 {
        background: url("__IMG__/phone.png");
        background-size: 32px;
    }

    .input-logo.logo2 {
        background: url("__IMG__/lock.png");
        background-size: 32px;
    }

    .input-logo.logo3 {
        background: url("__IMG__/eye.png");
        background-size: 32px;
        margin-right: 20px;
    }

    .input-logo.logo4 {
        background: url("__IMG__/eye2.png");
        background-size: 32px;
    }

    .input-logo.logo5 {
        background: url("__IMG__/close.png");
        background-size: 32px;
        margin-right: 20px;
    }

    .input-logo.logo6 {
        background: url("__IMG__/code.png");
        background-size: 32px;
    }

    .input input {
        margin-left: 20px;
        flex: 1;
        -webkit-appearance: none;
        outline: none;
        background: none;
        border: none;
        font-size: 16px;
        color: #999999;
    }

    .login-btn {
        width: 230px;
        height: 70px;
        background: rgba(0, 101, 240, 1);
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        text-align: center;
        line-height: 70px;
        color: #FFFFFF;
        font-size: 20px;
        margin: 0 auto;float: left;
    }
    .login-btn2 {
        width: 230px;
        height: 70px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        border: 1px solid rgb(0, 101, 240);
        text-align: center;
        line-height: 70px;
        color: rgb(0, 101, 240);
        font-size: 20px;
        margin: 0 auto;float: right;
    }

    .other {
        padding-top: 20px;
        color: #666666;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .code-word {
        color: #0065F0;
        font-size: 16px;
        margin-right: 20px;
    }

    .login2 {
        display: none;
    }

    .block {
        position: absolute;
        right: -400px;
        top: 0;
        width: 400px
    }

    .warning {
        position: absolute;
        left: 7px;
        top: 15px;
        height: 40px;
        line-height: 40px;
        padding-left: 22px;
        padding-right: 14px;
        color: white;
        background: url("__IMG__/bg.png") center center no-repeat;
        background-size: 100% 40px;
    }
    .hand_icon{
        cursor:pointer;
    }
    .icon_hide{
        display:none;
    }
    .code_gray{
        color:#ccc;
    }
    select{
        /*position: absolute;left: 0;margin-left: -110px;*/
        height:30px;
        width:90px;
        border: 1px solid #CCC;
        /*color: red;*/
    }
</style>
<body>
<header>
    <div class="round"><img src="__IMG__/logo.png" width="36" height="36"></div>
    <div class="logo-word">LOGO</div>
</header>
<div id="main">
    <div class="form">
        <div class="form-header">
            <div class="login-type login-active">修改密码</div>
        </div>
        <div class="login1">
            <div class="input">
                <div class="input-logo logo1"></div>
                <input type="text" id="phone1" placeholder="手机号" maxlength="11" value="{$phone}" readonly>
                <div class="input-logo logo5 hand_icon icon_hide" id="close1" onclick="$(this).prev().val('');$(this).addClass('icon_hide');$('.block').addClass('icon_hide');"></div>
                <div class="code-word hand_icon">
                    <select id="select">
                        <option value="86">中国&nbsp;+86</option>
                        <option value="852">香港&nbsp;852</option>
                        <option value="853">澳门&nbsp;853</option>
                        <option value="886">台湾&nbsp;886</option>
                    </select>
                </div>
                <div class="block icon_hide">
                    <div class="warning"></div>
                </div>
            </div>
            <div class="input">
                <div class="input-logo logo6"></div>
                <input type="text" id="code" placeholder="验证码">
                <div class="code-word hand_icon" onclick="sendcode(this);">获取验证码</div>
                <div class="block icon_hide">
                    <div class="warning">请输入正确的验证码</div>
                </div>
            </div>
            <div class="input">
                <div class="input-logo logo2"></div>
                <input type="password" id="pwd1" placeholder="新密码">
                <div class="input-logo logo3 hand_icon" onclick="showPwd(this)"></div>
                <div class="block icon_hide">
                    <div class="warning">请输入密码</div>
                </div>
            </div>
            <div class="input">
                <div class="input-logo logo2"></div>
                <input type="password" id="pwd2" placeholder="确认密码">
                <div class="input-logo logo3 hand_icon" onclick="showPwd(this)"></div>
                <div class="block icon_hide">
                    <div class="warning">请确认密码</div>
                </div>
            </div>
            <div class="login-btn hand_icon" id="confirm">提交</div>
            <div class="login-btn2 hand_icon" onclick="history.go(-1)">取消</div>
        </div>
    </div>
</div>
</body>
</html>
<script src="/static/admin/js/jquery.min.js"></script>
<script>
    $('#phone1').bind('input propertychange',function(){
        if($(this).val()){
            $('#close1').removeClass('icon_hide');
            $(this).parent().find('.block').addClass('icon_hide')
        }else{
            $('#close1').addClass('icon_hide');
        }
    })
    $('#code').bind('input propertychange',function(){
        if($(this).val()){
            $(this).parent().find('.block').addClass('icon_hide')
        }
    })
    $('#pwd1').bind('input propertychange',function(){
        if($(this).val()){
            $(this).parent().find('.block').addClass('icon_hide')
        }
    })
    $('#pwd2').bind('input propertychange',function(){
        if($(this).val()){
            $(this).parent().find('.block').addClass('icon_hide')
        }
    })
    $('#confirm').on('click',function (e) {
        var _phone = $('#phone1'),
            _pwd1 = $('#pwd1'),
            _pwd2 = $('#pwd2'),
            _code = $('#code'),
            p = 0,
            w1 = 0,
            w2 = 0,
            c = 0;
        if(_phone.val() == ""){
            _phone.parent().find('.block').removeClass('icon_hide').find('.warning').text('请输入手机号');
        }else{
            if(_phone.val().length < 6){
                _phone.parent().find('.block').removeClass('icon_hide').find('.warning').text('请输入正确的手机号');
            }else{
                p = 1;
            }
        }
        if(_code.val() == ""){
            _code.parent().find('.block').removeClass('icon_hide').find('.warning').text('请输入验证码');
        }else{
            c = 1;
        }
        if(_pwd1.val() == ""){
            _pwd1.parent().find('.block').removeClass('icon_hide').find('.warning').text('请输入新密码');
        }else{
            var pattern = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
            if(!pattern.test(_pwd1.val())){
                _pwd1.parent().find('.block').removeClass('icon_hide').find('.warning').text('密码由6-20位数字/字母/常用符号组成');
            }else{
                w1 = 1;
            }
        }
        if(_pwd2.val() == ""){
            _pwd2.parent().find('.block').removeClass('icon_hide').find('.warning').text('请输入确认密码');
        }else{
            var pattern = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
            if(!pattern.test(_pwd2.val())){
                _pwd2.parent().find('.block').removeClass('icon_hide').find('.warning').text('密码由6-20位数字/字母/常用符号组成');
            }else{
                if(_pwd1.val() != _pwd2.val()){
                    _pwd2.parent().find('.block').removeClass('icon_hide').find('.warning').text('两次输入的不一致，请重新输入');
                }else{
                    w2 = 1;
                }
            }
        }
        if(p && w1 && w2 && c){
            $(this).attr('disabled','disabled').html('提交中...');
            $.ajax({
                url:"{:url('shop/Index/changePwd')}",
                type:'post',
                data:{code:_code.val(),pwd:_pwd1.val()},
                dataType:'json',
                success:function(res){
                    if(res.code == 0){
                        _code.parent().find('.block').removeClass('icon_hide').find('.warning').text(res.msg);
                        $('#confirm').removeAttr('disabled').html('提交');
                    }else if(res.code == 200){
                        window.location.href=res.url;
                    }else{
                        $('#confirm').removeAttr('disabled').html('提交');
                        alert(res.msg)
                    }
                }
            })
        }
    })
    //发送验证码
    function sendcode(o){
        var obj= $(o);
        obj.removeAttr('onclick');
        if($('#phone1').val() == ""){
            obj.attr("onclick",'sendcode(this)');
            $('#phone1').parent().find('.block').removeClass('icon_hide').find('.warning').text('请输入手机号');
        }else{
            if($('#phone1').val().length < 6){
                obj.attr("onclick",'sendcode(this)');
                $('#phone1').parent().find('.block').removeClass('icon_hide').find('.warning').text('请输入正确的手机号');
            }else{
                var ex = $('#select').val();
                $.ajax({
                    url:"{:url('shop/Login/sendCode')}",
                    type:"post",
                    dataType:"json",
                    data:{type:4,ex:ex},
                    success:function(res){
                        if(res.code == 200){
                            settime(obj);
                        }else if(res.code == -1){
                            obj.attr("onclick",'sendcode(this)');
                            $('#phone1').parent().find('.block').removeClass('icon_hide').find('.warning').text(res.msg);
                        }else{
                            obj.attr("onclick",'sendcode(this)');
                            $('#code').parent().find('.block').removeClass('icon_hide').find('.warning').text(res.msg);
                        }
                    }
                })

            }
        }
    }
    var countdown=60;
    function settime(obj) {
        obj.addClass('code_gray');
        if (countdown == 0) {
            obj.attr("onclick",'sendcode(this)');
            obj.html("获取验证码");
            obj.removeClass('code_gray');
            countdown = 60;
            return;
        } else {
            obj.html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {
            settime(obj)
        },1000)
    }
    function changeLoginType (el, type) {
        $('.login-type').removeClass('login-active');
        $(el).addClass('login-active');
        if (type == 1) {
            $('.login2').hide();
            $('.login1').show();
        } else {
            $('.login1').hide();
            $('.login2').show();
        }
    }

    function showPwd (el) {
        if ($(el).hasClass('logo4')) {
            $(el).removeClass('logo4');
            $(el).parent().find('input').attr('type', 'password');
        } else {
            $(el).addClass('logo4');
            $(el).parent().find('input').attr('type', 'text');
        }
    }
</script>